<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

const props = defineProps([
  "xData",
  "series",
  "grid",
  "color",
  "legend",
  "yUnit",
  "data"
]);

const chartRef = ref(null);
let autoTooltipTimer = null;
let currentHighlightIndex = 0;
const allDimensions = ["小学", "初中", "高中", "高等学校", "其他", "幼儿园"];
const values = [2032046, 1047057, 684043, 1250160, 360485, 777738];
const positionTop = [20, 34, 188, 319, 188, 80];
const positionLeft = [468, 260, 173, 367, 567, 567];
const defaultColor = "#2182ff";
const highlightColor = "#ffffff"; // 新增高亮颜色常量

let detailInfo = ref({
  text: "高等学校",
  value: "4200",
  zb: 0,
  top: 0,
  left: 0,
});

const color = ["#000", "#fff", "#fff", "#fff", "#fff", "#fff"];
function setSpot() {
  var scatterData = [];
  props.data?.map((o, i) => {
    if (currentHighlightIndex == 5) currentHighlightIndex = -1;
    scatterData.push({
      value: [o, i],
      itemStyle: {
        normal: {
          color: i == currentHighlightIndex + 1 ? highlightColor : defaultColor,
        },
      },
    });
  });
  return scatterData;
}

const baseOption = {
  // tooltip: { trigger: 'item' },
  polar: {
    center: ["50%", "50%"],
    radius: "75%",
    },
  textStyle: { fontSize: '20px', color:'#C9E9F8'},
  angleAxis: {
    type: "category",
    data: name,
    minInterval: 1,
    boundaryGap: false,
    clockwise: false,
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  radiusAxis: {
    min: 0,
    max: 2100000,
    interval: 25,
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  radar: {
    indicator: allDimensions.map((name, index) => ({
      name,
      max: 2100000,
      color: defaultColor,
    })),
    center: ["50%", "50%"], // 调整雷达图位置向上移动
    splitArea: {
      areaStyle: {
        color: ["rgba(255, 255, 255, 0.05)"], // 设置网格线透明度
      },
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.2)", // 设置轴线透明度
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.3)", // 设置网格线透明度
      },
    },
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: props.data,
          name: "AllocatedBudget",
        },
      ],
      lineStyle: { width: 3, color: "#33c1ff" },
      areaStyle: { opacity: 0.5, color: "#225b9f" },
    },
    {
      type: "scatter",
      coordinateSystem: "polar",
      symbolSize: 10,
      data: setSpot(),
    },
  ],
  animationDuration: 500, // 添加过渡动画
};

let chart = null;

onMounted(() => {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  baseOption.series[1].data = setSpot();
  chart.setOption(baseOption);
  autoTooltipTimer = setInterval(() => {
    currentHighlightIndex = (currentHighlightIndex + 1) % allDimensions.length;
    updateHighlight();
  }, 2000);
});

const updateHighlight = () => {
  detailInfo.value = {
    text: allDimensions[currentHighlightIndex],
    value: props.data[currentHighlightIndex],
    top: positionTop[currentHighlightIndex],
    left: positionLeft[currentHighlightIndex],
    zb: ((props.data[currentHighlightIndex] / 6146697) * 100).toFixed(2),
  };
  // 创建新配置副本
  const newOption = JSON.parse(JSON.stringify(baseOption));

  baseOption.series[1].data = setSpot();
  // 更新图表配置
  chart.setOption(newOption);

  // 显示提示框
  chart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: 0,
  });
};
const pauseAnim = () => {
  clearInterval(autoTooltipTimer);
  autoTooltipTimer = null;
};

const resumeAnim = () => {
  if (!autoTooltipTimer) {
    autoTooltipTimer = setInterval(() => {
      currentHighlightIndex =
        (currentHighlightIndex + 1) % allDimensions.length;
      updateHighlight();
    }, 2000);
  }
};

onUnmounted(() => {
  clearInterval(autoTooltipTimer);
});
</script>

<template>
  <div class="wrapBox">
    <div
      ref="chartRef"
      style="width: 100%; height: 100%"
      @mousemove="pauseAnim"
      @mouseleave="resumeAnim"
    ></div>
    <div
      class="detailInfo"
      :style="{ top: detailInfo.top + 'px', left: detailInfo.left + 'px' }"
      v-if="detailInfo.left && detailInfo.top"
    >
      <p
        style="
          padding-bottom: 5px;
          border-bottom: 1px dashed #888;
          font-size: 14px;
        "
      >
        {{ detailInfo.text }}
      </p>
      <p>
        <span style="font-size: 16px; font-weight: 800; color: #47f2eb">{{
          detailInfo.value||0
        }}</span>
        <span style="color: #fff; font-size: 12px; margin-left: 2px">人</span>
      </p>
      <p>
        <span style="color: #fff; font-size: 12px; margin-left: 2px"
          >占比：</span
        >
        <span style="font-size: 12px">{{ detailInfo.zb=='NaN'?'0%':detailInfo.zb + "%" }}</span>
      </p>
    </div>
    <img src="@/assets/images/icon1.png" class="icon icon1" />
    <img src="@/assets/images/icon2.png" class="icon icon2" />
    <img src="@/assets/images/icon3.png" class="icon icon3" />
    <img src="@/assets/images/icon4.png" class="icon icon4" />
    <img src="@/assets/images/icon5.png" class="icon icon5" />
    <img src="@/assets/images/icon6.png" class="icon icon6" />
  </div>
</template>

<style scoped>
.wrapBox {
  width: 888px;
  height: 408px;
  /* background: #062649; */
  border-radius: 0px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 28px;
  position: absolute;
}

.icon1 {
  top: 113px;
  left: 295px;
}

.icon2 {
  top: 262px;
  left: 295px;
}

.icon3 {
  top: 353px;
  left: 431px;
}

.icon4 {
  top: 262px;
  left: 565px;
}

.icon5 {
  top: 114px;
  left: 565px;
}

.icon6 {
  top: 34px;
  left: 431px;
}

.detailInfo {
  width: 150px;
  padding: 10px;
  border: 1px solid #ffffff42;
  background: #073663;
  border-radius: 4px;
  position: absolute;
  color: #fff;
}

::v-deep .echarts-tooltip {
  background: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  padding: 10px !important;
  border-radius: 4px;
  color: white;
  font-size: 14px;
}
</style>